<template>
  <div class="home">
    <el-container class="el-container">
      <!--侧边栏-->
      <el-aside width="auto"
        v-if="isuser == null ? false : isuser  !== '顾客' ">
        <common-aside></common-aside>
      </el-aside>
      <!--导航栏-->
      <el-container class="el-container">
        <el-header class="el-header" style="  border-bottom: 1px solid #c1c1c1; ">
          <common-header></common-header>
        </el-header>
        <common-tag background-color="#e7e9e9"  v-if="isuser == null ? false : isuser !== '顾客' "></common-tag>
        <!--主面板-->
        <el-main class="el-main"
          v-bind:style="`${isuser == null ? 'overflow: inherit; background: #ffffff;' : isuser !== '顾客'?' background: #f6f8f9; padding-top: 2px !important; text-align: center; height: calc(100vh - 100px);':'overflow: inherit; background: #ffffff;'}`">
          <transition name=" router_animate">
            <router-view v-slot="{ Component }">
              <component :is="Component" />
            </router-view>
          </transition>
        </el-main>
        <!--底部-->
        <el-footer>
          <CommonFootVue></CommonFootVue>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import CommonTag from '@/components/container/CommonTag.vue';
import CommonAside from '@/components/container/CommonAside.vue';
import CommonHeader from '@/components/container/CommonHeader.vue';
import CommonFootVue from '@/components/container/CommonFoot.vue';


export default {
  name: 'KodaiHomeView',

  data () {
    return {
      isuser: null
    };
  },

  mounted () {
    this.isuser =JSON.parse(window.localStorage.getItem('roles')) 
  },

  methods: {

  },
  components: {
    CommonAside,
    CommonHeader,
    CommonTag,
    CommonFootVue

  }
};
</script>

<style lang="scss" scoped>
.router_animate-enter-active {
  animation: slideInLeft 0.4s;

}

.router_animate-leave-active {
  animation: slideOutLeft 0.4s;
}

* {
  margin: 0;
  padding: 0;
}

.el-header {
  padding: 0;
  background: #ffffff;
  overflow: hidden !important;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3) !important;
}

.el-main {
  padding: 0;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  position: absolute
}

::-webkit-scrollbar-thumb {
  background-color: #58a9b9
}

::-webkit-scrollbar-track {
  background-color: #ffffff
}

.el-container {
  height: 100vh;
}

.el-footer {
  padding: 0;
}

.product-list {
  background: #f9f9f9;
}
</style>







